<template>
  <div class="detail">
    <van-nav-bar left-arrow @click-left="$router.back()" title="搜索详情" placeholder fixed z-index="999" />
    <div v-if="list.length>0" class="spa">
      <span class="ka" v-for="(item, index) in list" :key="index"
        @click="$router.push({ path: '/home-list', query: { id: item._id, user_id: item.author_id } })">
        <p>{{ item.title }}</p>
        <!-- 一张图 -->
        <div class="img">
          <van-image class="img02" v-for="(iteml, indexl) in item.imageSrc" :key="indexl" :src="iteml">
            <template v-slot:error>加载失败</template>
          </van-image>
        </div>
        <div class="times">
          <p class="name">{{ item.author }}</p>
          <p class="pinglun">{{ item.comment }}评论</p>
          <p class="time">{{ item.time | moment }}</p>
        </div>
      </span>
    </div>
    <van-empty v-else image="search" description="暂无内容" />
  </div>
</template>

<script>
import { Empty } from 'vant';
import { NavBar } from 'vant';

export default {
  name: "App03Detail",
  components: {
    [Empty.name]: Empty,
    [NavBar.name]: NavBar
  },
  data() {
    return {
      list: []
    }
  },
  mounted() {
    // console.log(this.$route.query.item)
    this.list = JSON.parse(localStorage.getItem('searchlist'))
  },
  methods:{ }
}
</script>

<style lang="scss">
.detail {
  width: 100%;
  .spa {
  width: 100%;

  // background-color: cyan;
  .ka {
    display: block;
    width: 95%;
    // height: 300px;
    margin: auto;
    // background-color: antiquewhite;
    border-bottom: 1px solid rgb(201, 201, 201);

    p {
      width: 100%;
      height: 40px;
      font-size: 15px;
      font-weight: 500px;
      line-height: 40px;
      overflow: hidden;
      // padding-left: 15px;
    }

    .img {
      width: 100%;
      // height: 220px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      .img01 {
        width: 90px;
        height: 90px;
        margin: 5px 10px;
      }

      .img02 {
        width: 33%;
        // height: 280px;
      }
    }

    .times {
      width: 100%;
      display: flex;
      justify-content: space-between;
      font-size: 15px;
      color: rgb(201, 201, 201);

      .name {
        margin: 0;
        width: 30%;
      }

      .pinglun {
        // margin-left: -30px;
        width: 30%;
        padding-left: 15px;
      }

      .time {
        // margin-left: -60px;
        width: 45%;
      }
    }
  }
}
}
</style>